<template>
	<view :class="[circle === true || circle === 'true' ? 'ep-tit-fav--circle' : '']"
	:style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]"
	@click="onClick" class="ep-tit-fav">
		<text class="iconfav icon-fav" :style="{fontWeight:fontw,color:fontC}" :class="checked ? 'icon-shixinwujiaoxing' : 'icon-kongxinwujiaoxing'"></text>
		<text :style="{color: checked ? fgColorChecked : fgColor}"
		class="ep-tit-fav-text">{{ checked ? contentText.contentFav : contentText.contentDefault }}
		</text>
	</view>
</template>

<script>
	import uniIcons from "../uni-icons/uni-icons.vue";
	export default {
		name: "ep-tit-fav",
		components: {
			uniIcons
		},
		data(){
			return{

			}
		},
		props: {
			icofav1:{
				type: String,
				default: "/static/img/ico-fav-on.png"
			},
			icofav2:{
				type: String,
				default: "/static/img/ico-fav.png"
			},
			bgColor: {
				type: String,
				default: "#rgba(255,255,255,0)"
			},
			fgColor: {
				type: String,
				default: "#666666"
			},
			fontw: { //字体粗细
				type: String,
				default: "600"
			},
			fontC:{ //字体颜色
				type: String,
				default: "#eccf05"
			},
			bgColorChecked: {
				type: String,
				default: "rgba(255,255,255,0)"
			},
			fgColorChecked: {
				type: String,
				default: "#FFFFFF"
			},
			circle: {
				type: [Boolean, String],
				default: false
			},
			checked: {
				type: Boolean,
				default: false
			},
			contentText: {
				type: Object,
				default () {
					return {
						contentDefault: "",
						contentFav: ""
					};
				}
			}
		},
		watch: {
			checked() {
				if (uni.report) {
					if (this.checked) {
						uni.report("收藏", "收藏");
					} else {
						uni.report("取消收藏", "取消收藏");
					}
				}
			}
		},
		methods: {
			onClick() {
				this.$emit("click");
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ep-tit-fav {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 50rpx;
		height: 50rpx;
		line-height: 25px;
		text-align: center;
		border-radius: 3px;
		.icon-fav{
			font-size: 50rpx;
		}
	}
	.ep-tit-fav--circle {
		border-radius: 30px;
	}
	.ico-fav{
		display: flex;
		height: 40rpx;
		width: 40rpx;
	}
	.ep-tit-fav-star {
		display: flex;
		height: 25px;
		line-height: 24px;
		margin-right: 3px;
		align-items: center;
		justify-content: center;
	}
	.ep-tit-fav-text {
		display: flex;
		height: 25px;
		line-height: 25px;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
</style>
